<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    div{
        margin-bottom:10px;
    }
    </style>
</head>

<body>

    <body>
        <form action="http:// xxx.com/register" id="registerForm" method="post">
            <div>
                <span>请输入用户名：<input type="text" name="userName" /></span>
                <span>请输入密码：<input type="text" name="password" /></span>
                <span>请输入手机号码：<input type="text" name="phoneNumber" /></span>
            </div>
            <div>
                <span>只能是汉字：<input type="text" name="chinese" /></span>
                <span>只能是字母：<input type="text" name="english" /></span>
                <span>只能是数字：<input type="text" name="number" /></span>
            </div>
            <div>
                <span>只能是英文字母和数字：<input type="text" name="en_and_number" /></span>
                <span>不能存在非法字符：<input type="text" name="nokeyword" /></span>
            </div>
            <div>
                <span>请输入密码：<input type="password" name="pwd1" /> 请再次输入密码：<input type="password" name="pwd2" /></span>
            </div>
            <div>
                <span>只能是邮箱：<input type="email" name="email" /></span>
                <span>合法身份证号码：<input type="text" name="idcard" /></span>
                <span>验证格式：YYYY-MM-DD <input type="text" name="ymd" /></span>
                <span>验证格式：hh:mm:ss <input type="text" name="time" /></span>
            </div>
            <div>
                <span>验证格式：YYYY-MM-DD hh:mm:ss <input type="text" name="datetime" /></span>
                <span>只能是整数：<input type="text" name="int" /></span>
                <span>只能是双精度数字：<input type="text" name="DoublePrecision" /></span>
            </div>
            <div>
                <span>只能是邮政编码：<input type="text" name="zipcode" /></span>
                <span>只能是合法URL：<input type="text" name="url" /></span>
                <span>只能是QQ号码：<input type="text" name="qq" /></span>
            </div>
            <div>
                <span>只能是合法IP地址：<input type="text" name="ip" /></span>
                <span>只能是正数：<input type="text" name="pnumber" /></span>
                <span>只能中英文，数字，下划线，减号：<input type="text" name="uname" /></span>
            </div>
            <button>提交</button>
        </form>
    </body>

    <!-- 身份证号码，必须引入-->
    <script src="ResidentIdentityCard.js"></script>
    <!-- 身份证号码，必须引入-->

    <!-- 验证核心，必须引入-->
    <script src="RexForm.js"></script>
    <!-- 验证核心，必须引入-->

    <script>

        /*********************** 添加效验规则，待调用进行效验 **************************/
        var validataFunc = function (form) {
            //实例化验证类
            var validator = new Validator();

            //设置验证方法
            validator.add(form.userName, [{
                strategy: 'isNonEmpty',
                errorMsg: '用户名不能为空'
            }, {
                strategy: 'minLength:6',
                errorMsg: '用户名长度不能小于 6 位'
            }]);
            validator.add(form.password, [{
                strategy: 'minLength:6',
                errorMsg: '密码长度不能小于 6 位'
            }]);
            validator.add(form.phoneNumber, [{
                strategy: 'isMobile',
                errorMsg: '手机号码格式不正确'
            }]);
            validator.add(form.chinese, [{
                strategy: 'isNonEmpty',
                errorMsg: '不能为空'
            },{
                strategy: 'isCn',
                errorMsg: '只能是汉字'
            }]);
            validator.add(form.english, [{
                strategy: 'isNonEmpty',
                errorMsg: '不能为空'
            },{
                strategy: 'isEn',
                errorMsg: '只能是字母'
            }]);
            validator.add(form.number, [{
                strategy: 'isNonEmpty',
                errorMsg: '不能为空'
            },{
                strategy: 'isNumber',
                errorMsg: '只能是数字'
            }]);
            validator.add(form.en_and_number, [{
                strategy: 'isNonEmpty',
                errorMsg: '不能为空'
            },{
                strategy: 'isEnNumber',
                errorMsg: '只能是字母和数字'
            }]);
            validator.add(form.nokeyword, [{
                strategy: 'isNonEmpty',
                errorMsg: '不能为空'
            },{
                strategy: 'isNokeyword',
                errorMsg: '存在非法字符，请重新填写'
            }],["a","b",100]);  //检测是否存在 a    b   100
            validator.add(form.pwd1, [{
                strategy: 'isNonEmpty',
                errorMsg: '不能为空'
            },{
                strategy: 'isEqual',
                errorMsg: '两次密码输入不一致'
            }],form.pwd2);  //最后一个参数为第二个值
            validator.add(form.email, [{
                strategy: 'isNonEmpty',
                errorMsg: '不能为空'
            },{
                strategy: 'isEmali',
                errorMsg: '邮箱不正确'
            }]);
            validator.add(form.idcard, [{
                strategy: 'isNonEmpty',
                errorMsg: '不能为空'
            },{
                strategy: 'isIdCard',
                errorMsg: '身份证号码不正确'
            }]);
            validator.add(form.ymd, [{
                strategy: 'isNonEmpty',
                errorMsg: '不能为空'
            },{
                strategy: 'isYMD',
                errorMsg: '年月日格式不正确'
            }]);
            validator.add(form.time, [{
                strategy: 'isNonEmpty',
                errorMsg: '不能为空'
            },{
                strategy: 'isTime',
                errorMsg: '时间格式不正确'
            }]);
            validator.add(form.datetime, [{
                strategy: 'isNonEmpty',
                errorMsg: '不能为空'
            },{
                strategy: 'isDate',
                errorMsg: '日期时间格式不正确'
            }]);
            validator.add(form.int, [{
                strategy: 'isNonEmpty',
                errorMsg: '不能为空'
            },{
                strategy: 'isInt',
                errorMsg: '只能是整数'
            }]);
            validator.add(form.DoublePrecision, [{
                strategy: 'isNonEmpty',
                errorMsg: '不能为空'
            },{
                strategy: 'isDoublePrecision',
                errorMsg: '只能是双精度数字'
            }]);
            validator.add(form.zipcode, [{
                strategy: 'isNonEmpty',
                errorMsg: '不能为空'
            },{
                strategy: 'isZipCode',
                errorMsg: '只能是邮政编码'
            }]);
            validator.add(form.url, [{
                strategy: 'isNonEmpty',
                errorMsg: '不能为空'
            },{
                strategy: 'isUrl',
                errorMsg: '只能是网址'
            }]);
            validator.add(form.qq, [{
                strategy: 'isNonEmpty',
                errorMsg: '不能为空'
            },{
                strategy: 'isQQ',
                errorMsg: '只能是qq号码'
            }]);
            validator.add(form.ip, [{
                strategy: 'isNonEmpty',
                errorMsg: '不能为空'
            },{
                strategy: 'isIP',
                errorMsg: '只能是ip地址'
            }]);
            validator.add(form.pnumber, [{
                strategy: 'isNonEmpty',
                errorMsg: '不能为空'
            },{
                strategy: 'isPositiveNumber',
                errorMsg: '只能是正数'
            }]);
            validator.add(form.uname, [{
                strategy: 'isNonEmpty',
                errorMsg: '不能为空'
            },{
                strategy: 'isUserName',
                errorMsg: '只能中英文，数字，下划线，减号'
            }]);

            //开始验证
            var errorMsg = validator.start(form);
            return errorMsg;
        }

        /*********************** 客户表单提交，开始效验 **************************/
        var registerForm = document.getElementById('registerForm');
        registerForm.onsubmit = function () {
            var errorMsg = validataFunc(this);
            if (errorMsg) {
                alert(errorMsg);
                return false;
            }
        };

    </script>
</body>

</html>